import React, { Component } from 'react'
import './icon.css'
import './App.scss'

class App extends Component{
  state={
    selectnum:0,
    totalPrice:0,
    products: [
      {
        id: 1,
        product_title: "黑科技分区控温，95%鹅绒抗菌儿童鹅绒被",
        img_url:
          "https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75",
        price: "588",
        origin_price: 599,
        num: 1,
        checked: true,
      },
      {
        id: 2,
        product_title: "黑科技分区控温，95%鹅绒抗菌儿童鹅绒被",
        img_url:
          "https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75",
        price: "588",
        origin_price: 599,
        num: 1,
        checked: true,
      },
    ],
  }

  getSelector=(params)=>{
    let selectnum=0
this.state.products.map(v=>{
  if(v.checked){
    selectnum+=v.num
  }
})
return selectnum
  }


  getTotalPrice=(params)=>{
    let totalPrice=0;
    this.state.products.map(v=>{
totalPrice+=v.num*v.price
    })
return totalPrice
  }


  handleSub=(index)=>{
  console.log('想办法将num传进来')
  let products=this.state.products;
  products[index].num--;
  if(products[index].num<=0){
    products[index].num=0
  }
  this.setState({
    products:products,
  })
}

handleAdd=(index)=>{
  console.log('加')
  let products=this.state.products;
  products[index].num++;
  this.setState({
    products:products
  })
}

  render(){
return(

  <div className='cart'>
    <div className="list">
     {this.state.products.map((v,index)=>{
       return(
        <div className="list-item" key={v.id}>
        <div className="list-item-left">
          <i className='iconfont icon-xuanze'></i>
        </div>
        <div className="list-item-img">
          <img src={v.img_url} alt=""/>
        </div>
        <div className="list-item-right">
          <div className="item-right-top">{v.product_title}</div>
          <div className="item-right-bottom">
            <div className="price">
              <span className='nowprice'>￥{v.price}</span>
              <span className='originprice'>￥{v.origin_price}</span>
            </div>
            <div className="pricebtn">
              <span className='sub' onClick={this.handleSub.bind(this, index)}>-</span>
              <span className='num'>{v.num}</span>
              <span className='add' onClick={this.handleAdd.bind(this,index)}>+</span>
            </div>
          </div>
        </div>
      </div>
       )
     })}
    </div>

    <div className="fun">
          <div className="fun-left" >
            已选{this.getSelector()}
          </div>
          <div className="fun-right">
            <div className="totle">
              <p className='totleprice'>合计:{this.getTotalPrice()}</p>
            <p className='subprice'>已优惠:12</p>
            </div>
            <div className="pay">下单</div>
          </div>
    </div>
   
  </div>
)

  }
}
export default App;